<template>
	<view class="service">
		<img src="../../static/img/black.png" alt="" class="black" @tap="goBack">
		<view class="title">
		   <img src="../../static/img/kf-text.png" class="kf-title" alt="">
		</view>
		<view class="codeBox">
			<img :src="qrcode" class="code" alt="">
			<div class="text">扫描二维码，添加企业成员进行联系</div>
		</view>
		<view class="p">
			长按识别添加专属客服
		</view>
		<view class="p">
			拨打客服电话：{{tel}}
		</view>
		<a :href="'tel:' + tel" class="telBtn">
			<img src="../../static/img/telBtn.png"  class="telBtnImg" alt="">
		</a>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id:'',
				qrcode:'',
				tel:''
			};
		},
		onLoad(option) {
			this.id = option.id;
			this.getdec();
		},
		methods:{
			async getdec() {
				const res = await this.$httpPub({
					  url:'activity/' + this.id,
					  method:'get',
					  data:{}
				})
			 this.qrcode = res.qrcode;
			 this.tel = res.contact_remark;
			 console.log(res);
		},
		goBack() {
			uni.navigateBack({
				
			});
		}
	   }
	}
</script>

<style lang="scss">
  .service {
	  width: 100%;
	  height: 100%;
	  position: relative;
	  background-color: #f2cbbd;
	  .black {
		  position: absolute;
		  top:30rpx;
		  left:30rpx;
		  width: 80rpx;
		  height: 80rpx;
		  z-index: 99;
	  }
	  .title {
		  text-align: center;
		  padding: 140rpx 0 100rpx 0; 
	  }
	  .kf-title {
		  width: 448rpx;
		  height: 100rpx;
	  }
  }
  .codeBox {
		width: 560rpx;
		height: 570rpx;
	  border-radius: 22rpx;
	  background-color: #fff;
	  margin: 0 auto;
	  padding: 65rpx 80rpx;
	  margin-bottom: 36rpx;
	  .code {
		  width: 400rpx;
		  height: 400rpx;
		  margin-bottom: 20rpx;
	  }
	  .text {
		  text-align: center;
		  font-size: 12px;
		  color:#cccccc;
	  }
  }
  .p {
	  color:#fff;
	  text-align: center;
	  padding-bottom: 23px;
  }
  .telBtn {
	  display: block;
	  width: 384rpx;
	  height: 88rpx;
	  margin: 35rpx auto 0 auto;
	  img {
		  width: 100%;
		  height: 100%;
	  }
  }
</style>
